<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发布客服通知</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/lib/imageview/css/imageviewer.css" rel="stylesheet"/>
    <style>

        #edit_form button {
            padding: 4px 12px;
        }

        .hr-line-dashed {
            margin: 15px 0;
        }

        .specPanel .input-sm {
            height: 20px;
        }

        .specOn {
            border: 1px solid #FFD400;
            background-color: #FFF7E6;
        }

        .bootstrap-tagsinput {
            width: 80%;
        }

        .badge-info, .label-info {
            background-color: #5bc0de;
        }

        .removeBtn {
            position: absolute;
            right: 6px;
            top: 0px;
            color: #ccc;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content  fadeInRight tooltip-demo" style="padding: 0px;">
    <form role="form" id="edit_form" th:object="${room}">
        <input type="hidden" id="hdRoomId" th:value="*{id}"/>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content" style="border-top: none;">
                        <div class="panel-body form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">通知内容:</label>

                                <div class="col-sm-10">
                                    <textarea type="text" id="liveNoticeContent" cols="6" rows="5" th:text="*{notice}"
                                              class="form-control input-sm" style="width: 400px"
                                              placeholder="直播间通知内容,最多200个字符"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="text-align: center">
                                    <button class="btn btn-success btn-submit" type="button" id="editBtn">
                                        发布公告
                                    </button>
                                    <button th:if="*{enableNotice}" onclick="jsHelper.enable()"
                                            class="btn btn-primary btn-submit" type="button"
                                            id="enableBtn">
                                        关闭公告
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const editUri = /*[[@{/live/edit/notice/}]]*/  "";
    let enableNotice =/*[[${room.enableNotice}]]*/  false;
</script>

<script type="text/javascript">
    var index = parent.layer.getFrameIndex(window.name);

    $(function () {
        $("#editBtn").click(function () {
            let roomId = $("#hdRoomId").val();
            let liveNoticeContent = $("#liveNoticeContent").val();
            let requestData = {
                notice: liveNoticeContent
            };

            hot.ajax(editUri + roomId, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("发布成功", function () {
                        // $("#enableBtn").show();
                        location.reload();
                    }, 300);
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        })
    });


    let jsHelper = {
        enable() {
            let roomId = $("#hdRoomId").val();
            let requestData = {
                enable: false
            };
            hot.ajax(editUri + "enable/" + roomId, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    $("#enableBtn").hide();
                    hot.tip.success("操作成功", function () {
                    }, 300);
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        }
    }

</script>
</body>

</html>
